<template>
  <div class="shopcart">
    <ul>
    	<li v-for="item in shopcart" :key="item.id">
    		<img :src="item.src" />
    		<div>
    			<p>{{item.title}}x{{item.num}}</p>
    			<p class="price">￥{{item.price}}</p>
    			<p><button @click="del(item)">删除</button></p>
    		</div>
    	</li>
    </ul>
	<p>商品总价：￥{{totalPrice}}</p>
  </div>
</template>

<script>
	// import { mapState } from 'vuex'
	export default{
		name:'ShopCart',
		// computed:mapState(['shopcart']),
		computed:{
			shopcart(){
				return this.$store.state.shopcart;
			},
			totalPrice(){
				return this.$store.getters.totalPrice;
			}
		},
		methods:{
			del(item){
				this.$store.commit('del',item);
			}
		}
	}

</script>
<style scoped>
	li{
		border-bottom:1px dashed #ccc ;
		position: relative;
	}
	li div{
		display: inline-block;
		position: absolute;
		top: 20px;
		line-height: 30px;
	}
	li img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 5px 10px;
	}
	.price{
		color: #f00;
	}
	button{
		background-color: coral;
		border: none;
		color: white;
		padding:5px;
	}
	.shoplist{
		padding-bottom: 50px;
	}
</style>
